<template>
  <div class="meon-wrapper">
    <ul>
      <li class="liItem" v-for="(item, index) in menoListReadonly" :key="index">
        <div
          class="cover"
          :style="{ backgroundImage: `url(${item.src || icon1})` }"
        ></div>
        <div class="info-box">
          <p class="name">{{ item.name }}</p>
          <p class="describe">{{ item.describe }}</p>
          <div class="createTime">
            <span class="log-text"
              >{{ item.logData.num ? item.logData.num + '次' : ''
              }}<small>{{ item.createTime }}</small></span
            >
            <div class="events">
              <el-icon class="icon edit" @click="handleEdit(item)">
                <Edit />
              </el-icon>
              <el-icon class="icon detail" @click="handleDetail(item)">
                <Document />
              </el-icon>
              <el-popconfirm
                class="popconfirm-name"
                width="160"
                title="是否删除该便签！"
                confirm-button-text="是"
                cancel-button-text="否"
                :teleported="false"
                @confirm="handleDelete(item)"
              >
                <template #reference>
                  <el-icon class="icon del">
                    <Delete />
                  </el-icon>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="no-data" v-if="!menoListReadonly.length">
      <el-empty description="暂无数据！" />
    </div>
  </div>
</template>
<script setup>
import {
  inject,
  onMounted,
} from 'vue';
import { useRouter } from 'vue-router';
import { Delete, Edit, Document } from '@element-plus/icons-vue';
import useSymbols from './../../compostions/useSymbols.js';
import { TYPE_NAME_BIAN_QIAN } from '../../util/constant';

import icon1 from '../../assets/imgs/memo/001.png';

const { menoListReadonly, getMenoDataList, deleteMenoDataItem, setVisitItem } =
  inject(useSymbols);

const router = useRouter();

onMounted(() => {
  getMenoDataList();
});

// 编辑
const handleEdit = ({ id }) => {
  setVisitItem(id, TYPE_NAME_BIAN_QIAN); // 统计方法
  getMenoDataList();
  router.push({ path: '/index/memoEdit', query: { id } });
};

// 详情
const handleDetail = ({ id }) => {
  setVisitItem(id, TYPE_NAME_BIAN_QIAN); // 统计方法
  getMenoDataList();
  router.push({ path: '/index/memoDetail', query: { id } });
};
// 删除
const handleDelete = async ({ id }) => {
  deleteMenoDataItem(id);
};
</script>
<style scoped lang="less">
.meon-wrapper {
  width: 100%;

  ul {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
    grid-column-gap: 14px;
    width: 100%;

    .liItem {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      display: grid;
      border-radius: 15px;
      grid-template-columns: 80px calc(100% - 94px);
      grid-column-gap: 12px;
      grid-row-gap: 10px;
      background-color: #ffffff;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;

      .cover {
        border-radius: 15px;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
      }

      .info-box {
        width: 100%;

        p {
          margin: 0;
        }

        .name {
          color: #555;
          font-size: 18px;
          font-weight: bold;
          line-height: 22px;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 94%;
          white-space: nowrap;
        }

        .describe {
          font-size: 14px;
          color: #777;
          line-height: 18px;
          height: 36px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
        }

        .createTime {
          line-height: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .log-text {
            color: var(--system-primary-color);
            font-size: 12px;
            margin-inline-end: 4px;
            small {
              font-size: 13px;
              color: #999;
            }
          }

          .events {
            display: flex;
            align-items: end;
            .icon {
              font-size: 15px;
              padding: 0 2px;
              cursor: pointer;

              &:hover {
                transform: scale(1.05);
                filter: brightness(0.98);
              }
            }

            .edit {
              color: var(--system-primary-color);
            }

            .detail {
              color: #3f9eff;
            }

            .del {
              color: #f56c6c;
            }

            /deep/ .el-popover {
              border-radius: 15px;

              .el-button--primary {
                background-color: var(--system-primary-color);
                border: none;
              }

              .el-button {
                border-radius: 999px;
                border: none;
              }
            }
          }
        }
      }
    }
  }

  .no-data {
    padding-top: calc(35vh - 150px);
  }
}
</style>
